import React from 'react'
import {Link} from 'react-router'
import Reflux from 'reflux'
import Action from '../../../action/action'
import Store from '../../../store/store'
import ReactMixin from 'react-mixin'

import MessageBox from '../../../component/messageBox/messageBox'

export default class myBankAdd extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showBankCardTypeList : false,
            bankTypeList : ["中国建设银行","中国农业银行","中国工商银行","中国银行","中国民生银行","招商银行","交通银行","广州银行","中国邮政储蓄银行"],
            checkBankListIndex: null,
            count : 60,
            proving : false,
            proveCount : null,
        }
    }
    showList(){
        this.setState({
            showBankCardTypeList:!this.state.showBankCardTypeList
        })
    }
    checkBankType(){
        Action.getCheckBankListIndex();
        this.showList()
    }
    prove(){
        this.setState({
            proving:true,
        });
        this.state.proveCount = setInterval(()=>{
            let num = this.state.count-1;
            this.setState({
                count : num
            })
        },1000);
        setTimeout(()=>{
            clearInterval(this.state.proveCount);
            this.setState({
                proving: false
            })
        },60000)
    }
    render(){
        let showMessageBox = this.state.showBankCardTypeList,
            list = this.state.bankTypeList,
            index = this.state.checkBankListIndex;
        return(
            <div className="myBankAdd">
                <ul>
                    <li>
                        <p>卡类型：</p>
                        <input type="text"  value={list[index] || "请选择卡类型"} readOnly="readOnly" onClick={this.showList.bind(this)}/>
                    </li>
                    <li>
                        <p>卡 &nbsp;&nbsp;号：</p>
                        <input type="text"/>
                    </li>
                    <li>
                        <p>持卡人：</p>
                        <input type="text"/>
                    </li>
                    <li>
                        <p>手机号：</p>
                        <input type="text"/>
                    </li>
                    <li>
                        <p>验证码：</p>
                        <input type="text" placeholder="6位数验证码"/>
                        <a className={this.state.proving ? "active" : null } onClick={this.prove.bind(this)}>{this.state.proving ?this.state.count : "验证码"}</a>
                    </li>
                </ul>
                <Link to="/my/bankCard" className="myCashBtn active">
                    <p>确定</p>
                </Link>
                {showMessageBox ? <MessageBox type="1"
                                              cancel={this.showList.bind(this)}
                                              sure={this.checkBankType.bind(this)}
                                              list={this.state.bankTypeList}/> : null}
            </div>
        )
    }
}
ReactMixin.onClass(myBankAdd,Reflux.connect(Store))